<template>
  <div id="menubar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#2b2b2b"
      text-color="#9c1a1a"
      active-text-color="#9c1a1a"
    >
      <el-menu-item index="/general" @click="push('/general')"
        >常规设置</el-menu-item
      >
      <el-menu-item index="/export" @click="push('/export')"
        >输出格式</el-menu-item
      >
      <el-menu-item index="/account" @click="push('/account')"
        >账户信息</el-menu-item
      >
      <el-menu-item index="/version" @click="push('/version')"
        >版本更新</el-menu-item
      >
      <el-menu-item index="/terms" @click="push('/terms')"
        >服务条款</el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/general",
    };
  },
  methods: {
    push(index) {
      if (this.$route.path != index) {
        this.$router.push(index);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#menubar {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/deep/ .el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>
